/*显示更多城市*/
const more_city = document.getElementById("more-city");
const more_btn = document.getElementById("more-btn");
const less_btn = document.getElementById("less-btn");

more_btn.addEventListener("click", function () {
    more_city.style.height = "auto";
    more_btn.style.display = "none";
    less_btn.style.display = "block";
})

less_btn.addEventListener("click", function () {
    more_city.style.height = "52px";
    // more_btn.className = "";
    less_btn.style.display = "none";
    more_btn.style.display = "block";
})


/*分页器实现*/
const prev = document.getElementById("btn-prev");
const next = document.getElementById("btn-next");
const nums = document.querySelectorAll(".pager .number");

for (let i = 0; i < nums.length; i++) {
    nums[i].setAttribute("data-index", i.toString());
    nums[i].addEventListener("click", function () {
        // 排他思想
        for (let j = 0; j < nums.length; j++) {
            nums[j].className = "number";
        }
        this.className = "number active"
    })
}

prev.addEventListener("click", function () {
    let active = document.querySelector(".number.active");
    let index = Number(active.getAttribute("date-index"));
    if (index === 0) {
        index = 1;
    }
    for (let j = 0; j < nums.length; j++) {
        nums[j].className = "number";
    }
    nums[index].className = "number active"
})

next.addEventListener("click", function () {
    let active = document.querySelector(".number.active");
    let index = Number(active.getAttribute("date-index"));
    if (index === 5) {
        index = 4;
    }
    for (let j = 0; j < nums.length; j++) {
        nums[j].className = "number";
    }
    // date-index 是从0开始，而页码是从1开始
    nums[index + 1].className = "number active"
})

/*分类栏选中城市*/
const cities = document.querySelectorAll("#city-all .factor-content-item");
const selected = document.querySelector(".factor-selected-city");

for (let i = 0; i < cities.length; i++) {
    cities[i].addEventListener("click", function () {
        for (let j = 0; j < cities.length; j++) {
            cities[j].className = "factor-content-item";
        }
        this.className = "factor-content-item factor-content-item-default";
        selected.innerHTML = this.innerHTML;
    })
}

/*分类栏选中类型*/
const categories = document.querySelectorAll("#category-all .factor-content-item");
for (let i = 0; i < categories.length; i++) {
    categories[i].addEventListener("click", function () {
        for (let j = 0; j < categories.length; j++) {
            categories[j].className = "factor-content-item";
        }
        this.className = "factor-content-item factor-content-item-default";
    })
}

/*分类栏选中时间*/
const dates = document.querySelectorAll("#date-all .factor-content-item");
for (let i = 0; i < dates.length; i++) {
    dates[i].addEventListener("click", function () {
        for (let j = 0; j < dates.length; j++) {
            dates[j].className = "factor-content-item";
        }
        this.className = "factor-content-item factor-content-item-default";
    })
}

/*tab标签栏选择*/
const mytabs = document.querySelectorAll(".category-sort-item");
for (let i = 0; i < mytabs.length; i++) {
    mytabs[i].addEventListener("click", function () {
        for (let j = 0; j < mytabs.length; j++) {
            mytabs[j].className = "category-sort-item";
        }
        this.className = "category-sort-item active";
    })
}






